<div class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<!-- 头部区域 -->
		<ul class="layui-nav layui-layout-left">
			<li class="layui-nav-item" lay-unselect>
				<a href="javascript:;" layadmin-event="refresh" title="刷新">
					<i class="layui-icon layui-icon-refresh-3"></i>
				</a>
			</li>
		</ul>
		<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
			<li class="layui-nav-item layui-hide-xs" lay-unselect>
				<a href="javascript:;" layadmin-event="clear_cache">
					<i class="layui-icon layui-icon-delete"></i>
				</a>
			</li>
			<li class="layui-nav-item" lay-unselect>
				<a href="javascript:;">
					<cite>admin</cite>
				</a>
				<dl class="layui-nav-child">
					<dd><a lay-href="set/user/info">基本资料</a></dd>
					<dd><a lay-href="set/user/password">修改密码</a></dd>
					<hr>
					<dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
				</dl>
			</li>

			<li class="layui-nav-item layui-hide-xs" lay-unselect>
				<a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
			</li>
			<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
				<a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
			</li>
		</ul>
	</div>

	<!-- 侧边菜单 -->
	<div class="layui-side layui-side-menu">
		<div class="layui-side-scroll">
				<div class="layui-logo" lay-href="">
					<span>yy蛋糕</span>
				</div>

				<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
					lay-filter="layadmin-system-side-menu">
				</ul>
			</script>
		</div>
	</div>
	
	<div id="c_nav">
		
	</div>


	<!-- 页面标签 -->
	<script type="text/html" template lay-done="layui.element.render('nav', 'layadmin-pagetabs-nav')">
	{{# if(layui.setter.pageTabs){ }}
		<div class="layadmin-pagetabs" id="LAY_app_tabs">
			<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
			<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
			<div class="layui-icon layadmin-tabs-control layui-icon-down">
				<ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
					<li class="layui-nav-item" lay-unselect>
						<a href="javascript:;"></a>
						<dl class="layui-nav-child layui-anim-fadein">
							<dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
							<dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
							<dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
						</dl>
					</li>
				</ul>
			</div>
			<div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
				<ul class="layui-tab-title" id="LAY_app_tabsheader">
					<li lay-id="/"><i class="layui-icon layui-icon-home"></i></li>
				</ul>
			</div>
		</div>
		{{# } }}
	</script>


	<!-- 主体内容 -->
	<div class="layui-body" id="LAY_app_body">
		<div class="layadmin-tabsbody-item layui-show"></div>
	</div>

	<!-- 辅助元素，一般用于移动设备下遮罩 -->
	<div class="layadmin-body-shade" layadmin-event="shade"></div>

</div>

<script>
	layui.use(['jquery', 'admin'], function() {
		var $ = layui.jquery, admin = layui.admin, setter = layui.setter;

		$(document).on('click', ".layui-nav-tree>.layui-nav-item", function() {
			let _data_name = $(this).data('name');
			$("#c_nav").find('ul').hide();
			let _c_nav_item = $("#c_nav").find('ul[data-name="'+ _data_name +'"]');
			if (_c_nav_item.length) {
				_c_nav_item.show();
				$("#c_nav").show();
			} else {
				$("#c_nav").hide();
			}
			
			if ($("#c_nav:visible").length > 0) {
				$(".layadmin-tabsbody-item.layui-show").css('left', '140px');
			} else {
				$(".layadmin-tabsbody-item.layui-show").css('left', '0');
			}
		});
		
		$(document).on('click', ".c_nav_a_item", function() {
			let _this = $(this);
			_this.next().toggle();
			let _icon_item = _this.find('.layui-icon.second-icon');
			if (_icon_item.hasClass('up')) {
				_icon_item.removeClass('up');
				_this.addClass('active')
			} else {
				_icon_item.addClass('up');
				_this.removeClass('active')
			}
		});
		
		// 获取菜单数据
		admin.req({
			url: setter.API_HOST + 'admin/main/menu',
			done: function(res) {
				if (res.code == 0) {
					console.log(res)
					let _nav_html = [];
					let _c_nav_html = [];
					$.each(res.data.menuInfo, function(i, d) {
						_nav_html.push('<li data-name="'+ d.name +'" data-jump="'+ d.path +'" class="layui-nav-item">');
						
						_nav_html.push('<a href="javascript:;" lay-tips="'+ d.name +'" lay-direction="2">');
						_nav_html.push('<i class="'+ d.icon +'"></i>');
						_nav_html.push('<cite>'+ d.title +'</cite>');
						_nav_html.push('</a>');
						_nav_html.push('</li>');
						
						if(d.child) {
							_c_nav_html.push('<ul data-name="'+ d.name +'">');
							$.each(d.child, function(ci, cd) {
								_c_nav_html.push('	<li class="c_nav_item">');
								if(cd.child) {
									_c_nav_html.push('		<a href="javascript:;" class="c_nav_a_item">');
									_c_nav_html.push('			<cite>'+ cd.title +'</cite>');
									_c_nav_html.push('			<i class="layui-icon second-icon layui-icon-triangle-d up"></i>');
								} else {
									_c_nav_html.push('		<a href="javascript:;" lay-href="'+ cd.path +'" class="c_nav_a_item">');
									_c_nav_html.push('			<cite>'+ cd.title +'</cite>');
								}
								_c_nav_html.push('		</a>');
								if(cd.child) {
									_c_nav_html.push('<dl>');
									$.each(cd.child, function(k, v) {
										_c_nav_html.push('<dd><a href="javascript:;" lay-href="'+ v.path +'">'+ v.title +'</a></dd>');
									});
									_c_nav_html.push('</dl>');
								}
								_c_nav_html.push('	</li>');
							});
							_c_nav_html.push('	</ul>');
						}
					});
					$(".layui-nav-tree").html(_nav_html.join(''));
					$("#c_nav").html(_c_nav_html.join(''));
				}
			}
		});
	});
</script>